<template>

    <!-- 推荐模块 -->
    <section ref='wrapper' v-if="selectedId == 0">
        <van-loading v-if="loading1" style="text-align:center">{{ loading1 ? '释放刷新' :'加载完毕'}}</van-loading>
        <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
        <div>
            <div v-for='(item,index) in newData' :key='index'>
                <Swiper v-if='item.type=="swiperList"' :swiperList='item.data'></Swiper>

                <Icons v-if='item.type=="iconsList"' :iconsList='item.data'></Icons>

                <Recommend v-if='item.type=="recommendList"' :recommendList='item.data'></Recommend>

                <Ad v-if='item.type=="adList"' :adList='item.data'></Ad>
            </div>
            <div class='like'>
                <Card>
                    <span>猜你喜欢</span>
                </Card>
                <ul>
                    <li v-for='(item,index) in likeList' :key='index' @click='goDetail(item.id)'>
                        <h2>
                            <img v-lazy="item.imgUrl" alt="">
                        </h2>
                        <h3>{{item.name}}</h3>
                        <div>
                            <span>¥</span>
                            <b>{{item.price}}</b>
                        </div>
                    </li>
                </ul>
            </div>

            <van-loading color="#1989fa" class="loading" v-if="showLoading " size="30px">加载中...</van-loading>
            <!-- 数据加载完毕的时 -->
            <div v-if="hasData" class="hasData">
                数据加载完毕
            </div>
            <!-- 占位符 -->
            <div class="divide">

            </div>
        </div>
        <!-- </van-pull-refresh> -->
    </section>
</template>

<script>
import BigPao from '@/components/home/BigPao.vue'
import Header from '@/components/home/Header.vue'
import Swiper from '@/components/Swiper.vue'
import Icons from '@/components/home/Icons.vue'
import Recommend from '@/components/home/Recommend.vue'
import Like1 from '@/components/home/Like1.vue'
import Ad from '@/components/home/Ad.vue'
import Tabbar from '@/components/common/Tabbar.vue'
//引入插件
import BetterScroll from 'better-scroll'
import Card from '@/components/home/Card.vue'
import { getLikeList, getIndexList } from '@/common/api/index.js'
import { Toast } from 'vant'
import Vue from 'vue'
Vue.use(Toast)
export default {
    name: "Home",
    data () {
        return {
            selectedId: 0,
            items: [],
            newData: [],
            tBetterScroll: '',
            options: {
                activeColor: '#b0352f'
            },
            likeList: [],
            pageIndex: 1,
            // 上拉加载是否显示加载中
            showLoading: false,
            hasData: false,
            isLoading: false,
            disableTouch: false,
            tab: 0,
            tabList: [],
            loading1: false
        }
    },
    components: {
        Header,
        Swiper,
        Icons,
        Recommend,
        Like1,
        Ad,
        Tabbar,
        Card,
        BigPao
    },
    mounted () {
        this.getData()
    },
    activated () {
        if (this.$refs.wrapper.tBetterScroll != null) {
            //通过ref获取到滑动组件内部的属性和方法
            this.$refs.wrapper.scrollTo(0, this.saveY);
            this.$refs.wrapper.tBetterScroll.refresh();
        }
    },
    deactivated () {
        if (this.$refs.wrapper.tBetterScroll != null) {
            this.saveY = this.$refs.wrapper.tBetterScroll.y;
            console.log(this.saveY);
        }
    },
    methods: {
        getData () {
            getLikeList(this.pageIndex).then((res1) => {
                this.likeList = res1.data
                this.pageIndex++
                getIndexList().then(res => {
                    console.log(res);
                    this.items = Object.freeze(res.topBar);
                    this.newData = Object.freeze(res.data);
                    this.$nextTick(() => {
                        if (!this.tBetterScroll) {
                            this.tBetterScroll = new BetterScroll(this.$refs.wrapper, {
                                movable: true,
                                // zoom: true,
                                // click: true,
                                probeType: 3,
                                scrollbar: {
                                    fade: false,
                                    interactive: false
                                },
                                pullUpLoad: {
                                    threshold: 120
                                },
                                pullDownRefresh: {
                                    threshold: 5,
                                    stop: 10
                                }
                            })
                            console.log(localStorage.getItem('scrollY1'));
                            this.tBetterScroll && this.tBetterScroll.scrollTo(0, localStorage.getItem('scrollY1'))
                            this.tBetterScroll.on('scrollEnd', (pos) => {
                                // console.log(pos.y);
                                // console.log(pos.y);
                                localStorage.setItem('scrollY1', pos.y)
                            })
                            const refresh = () => {
                                getLikeList(this.pageIndex++).then(res => {
                                    if (res.message) {
                                        this.hasData = true
                                        this.tBetterScroll && this.tBetterScroll.finishPullUp();
                                    } else {
                                        this.likeList = [...this.likeList, ...res.data]
                                        console.log(this.likeList);
                                        setTimeout(() => {
                                            this.$nextTick(() => {
                                                this.tBetterScroll.refresh()
                                                this.tBetterScroll.finishPullUp();
                                            })
                                        }, 100)
                                    }
                                }).finally(() => {
                                    this.showLoading = false
                                })
                            }
                            function thro (func, wait) {
                                let timeOut;
                                return function () {
                                    if (!timeOut) {
                                        timeOut = setTimeout(function () {
                                            func();
                                            timeOut = null;
                                        }, wait);
                                    }
                                };
                            }
                            const method = thro(refresh, 1000)
                            this.tBetterScroll.on('pullingUp', () => {
                                setTimeout(() => {
                                    this.showLoading = true
                                }, 10)
                                method()
                            })

                            this.tBetterScroll.on('pullingDown', () => {
                                this.hasData = false
                                if (!this.loading1) {
                                    this.loading1 = true
                                    setTimeout(() => {
                                        this.pageIndex = 1
                                        this.getData()
                                        this.loading1 = false
                                        this.tBetterScroll.finishPullDown()
                                        Toast('刷新成功')
                                    }, 200)
                                }
                            })

                        } else {
                            this.tBetterScroll.refresh()
                        }
                    })
                })
            })
            //当dom都加载完毕了再去执行
        },
        changeTab (index) {
            this.tab = index
            if (index == 0) {
                this.pageIndex = 1
                this.tBetterScroll = ''
                this.getData()
            } else {
                this.tBetterScroll = ''
            }
        },
        goDetail (id) {
            this.$router.push({
                path: '/detail',
                query: {
                    id
                }
            })
        },
    }
};
</script>

<style scoped>
.home {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.headers {
    width: 100%;
    height: 2.88rem;
}
.headers-main {
    position: fixed;
    left: 0;
    top: 0;
}
section {
    flex: 1;
    overflow: hidden;
}
::v-deep .ly-tabbar {
    box-shadow: none;
    border-bottom: none;
}
.like ul {
    display: flex;
    flex-wrap: wrap;
    background: #f0f0f0;
}
.like ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48%;
    background: #ffffff;
}
.like ul li:nth-child(odd) {
    margin-top: 5px;
    margin-left: 3px;
}
.like ul li:nth-child(even) {
    margin-top: 5px;
    margin-left: 7px;
}
.like h3 {
    padding: 0 0.16rem;
    width: 93%;
    font-size: 0.373333rem;
    font-weight: 400;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.like ul li > div {
    width: 93%;
    padding: 0.16rem;
    text-align: left;
    color: #ff0000;
}
.like ul li > div span {
    font-size: 0.32rem;
}
.like ul li > div b {
    font-weight: 600;
    font-size: 0.426666rem;
}
.like img {
    width: 4.693333rem;
    height: 4.693333rem;
}
.like img[lazy="loading"] {
    background-color: #f7f7f7;
}

.loading {
    padding-top: 8px;
    height: 20px;
    /* margin-left: 130px; */
    text-align: center;
    background: #f0f0f0;
}

.hasData {
    padding-top: 8px;
    color: #b3b4b5;
    background: #f0f0f0;
    /* margin-left: 130px; */
    font-size: 16px;
    height: 50px;
    text-align: center;
}

.divide {
    height: 80px;
    background: #f0f0f0;
}
</style>